import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import MyHead from './myHead';
import { request } from '../../api';
import mobxdata from "../../mobx/data"
import MyMenu from './mymenu';
import {Redirect, Switch,Route} from "react-router-dom"
import lazyload from '../../utils/lazyload';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export default class MainCom extends Component {
    state={
        list:[]
    }
    componentDidMount(){
        request.getuserinfo()
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo(res.result)   // 存储到mobx 全局变量 
            }else if(res.code==3000){
                this.props.history.push("/login")
            }
        })

        const {pathname} = this.props.location
        console.log(pathname);
        const names = pathname.split("/")
        console.log(names);
        var txt = ""
        names.forEach((item,i)=>{
            if(item){
                txt += "/"+item
                this.state.list.push({
                    i,
                    title:item,
                    txt
                })
            }
        })

        this.setState({
            list:this.state.list
        })
    }

    render() {
        
        return (
            <div className="main">
                <Layout style={{ width: '100%', height: '100%', minHeight: '100vh', display: 'flex', flexDirection: "row" }}>
                    <div >
                        <MyMenu history={this.props.history}></MyMenu>
                    </div>

                    <Layout style={{ flex: 1, height: '100vh', display: 'flex' }}>
                        <div style={{ padding: '0  0 0 20px' }}>
                                <MyHead></MyHead>
                        </div>
                        <Layout style={{ padding: "0 20px 0px", flex: 1 }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>

                            {
                                this.state.list.map((item,i)=>{
                                    return(
                                        <Breadcrumb.Item style={{cursor:"pointer"}} key={i}  onClick={()=>this.goBackByBreadcrumb(item.txt)}> {item.title} </Breadcrumb.Item>
                                    )
                                })
                            }

                        </Breadcrumb>
                            <Content style={{ padding: 20, minHeight: 360, margin: 0, overflow: 'auto', height: '100%', background: "#fff" }}>
                                <Switch>
                                    <Route path="/main" exact render={()=>(<Redirect to="/main/home"/> )}></Route>
                                    <Route path="/main/home" exact component={lazyload(()=>import("../home"))}></Route>
                                    <Route path="/main/mine" exact component={lazyload(()=>import("../mine"))}></Route>
                                    <Route path="/main/user" component={
                                        ()=>(
                                            <Switch>
                                                 <Route path="/main/user" exact render={()=>(<Redirect to="/main/user/list" /> )} />
                                                <Route path="/main/user/list"  component={lazyload(()=>import("../users"))  }  />
                                                <Route path="/main/user/fenxi"  component={lazyload(()=>import("../users/fenxi"))  }  />
                                            </Switch>
                                        )
                                    }></Route>
                                     <Route path="/main/advise" component={
                                        ()=>(
                                            <Switch>
                                                <Route path="/main/advise" exact render={()=>(<Redirect to="/main/advise/list" /> )} />
                                                <Route path="/main/advise/list"  component={lazyload(()=>import("../advise/list"))  }  />
                                                <Route path="/main/advise/fenxi"  component={lazyload(()=>import("../advise/datafenxi"))  }  />
                                            </Switch>
                                        )
                                    }></Route>
                                      <Route path='/main/anno' component={lazyload(()=>import("../anno/index"))  } />
                                    <Route exact render={()=>(<Redirect to="/main/home"/> )}></Route>
                               </Switch>
                            </Content>
                            <Footer style={{ textAlign: 'center', padding: 10 }}>超市管理系统 ©2010 Created by 萝卜</Footer>
                        </Layout>
                    </Layout>
                </Layout>
            </div>
        )
    }
}
